<template>
    <div>
        <treeselect 
            ref="committeeTree" 
            :value="value"
            :multiple="false"
            :clearable="true"
            :searchable="true"
            :options="options"
            :show-count="true"
            :disabled="disabledTree"
            :disable-branch-nodes="true"
            value-consists-of="LEAF_PRIORITY"
            :max-height="300"
            :default-expand-level="1"
            :normalizer="normalizer"
            placeholder="请选择党组织"
            @input="updateValue"
        />
    </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getTreeListRest } from '@/common/apis/system'

export default {
    name: 'committeeTree',
    props: {
        value: {
            type: Number
        },
        disabledTree: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    components: { 
        Treeselect 
    },
    data() {
        return {
            options: []
        }
    },
    mounted() {
        this.getTreeList()
    },
    methods: {
        getTreeList() {
            getTreeListRest().then(result => {
                if (result.data.code == 200) {
                    this.options = result.data.content || []
                }
            })
        },
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
                if (node.level !== 3) {
                    node.isDisabled = true
                }
            }
            return {
                id: node.id,
                label: node.deptName,
                children: node.children
            }
        },
        updateValue(value) {
            this.$emit('input', value)
        }
    }
}
</script>
